<template>
	<view>
		<view class="t-table">
			<view style="padding: 20rpx 34rpx;" class="font-24">商品补货单</view>
			<!-- 表头 -->
			<view class="flex flex-jc-sb text-a t-title" style="padding-right: 34rpx;">
				<view v-for="(item,index) in formContent" :key="item.field"
					:style="{width: item.width,fontSize: item.fontSize}">
					<view v-if="item.field == 'kc' && isConfirm">
						数量
					</view>
					<view v-else-if="item.field == 'quantity' && isConfirm">
						金额
					</view>
					<view v-else>
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y :style="{height: `calc(100vh - 340rpx)`}">
			<view v-for="(item,index) in list" :key="index">
				<view class="flex flex-jc-sb list flex-ai-c" style="font-size: 22rpx;">
					<view :style="{width: formContent[0].width,textAlign: formContent[0].textAlign}">
						{{item.channel_no}}
					</view>
					<view class="ellipsis" :style="{width: formContent[1].width,textAlign: formContent[1].textAlign}">
						{{item.goods_title}}
					</view>
					
					
					<!-- 数量 -->
					<!-- 库存 -->
					<view :style="{width: formContent[2].width,textAlign: formContent[2].textAlign}">
						<view v-if="isConfirm">{{item.quantity}}</view>
						<view v-else>{{item.stock}}</view>
					</view>
					
					
					<!-- 金额 -->
					<!-- 补货 -->
					<view :style="{minWidth: formContent[3].width,textAlign: formContent[3].textAlign}"
						style="padding-right: 34rpx;">
						<view v-if="isConfirm">
							{{Math.ceil((item.quantity * item.warehouse_cost_price) * 100) / 100}}
						</view>
						<view v-else>
							<u-number-box size="12" color="#333333" bgColor="#fff" iconStyle="color: #999999;" button-size="12"
								bg-color="#fff" :min="0" :max="item.warehouse_stock" v-model="item.quantity" @overlimit="overlimit"></u-number-box>
						</view>
						
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="menu flex flex-ai-c" :class="[isConfirm?'flex-jc-c':'']">
			<view class="menu-left flex flex-dir-c flex-ai-c" @click="allSubmint" v-if="!isConfirm">
				<u-icon name="plus-circle" color="#333333" size="32"></u-icon>
				<view>一键补满</view>
			</view>

			<view class="menu-right">
				<view class="flex flex-ai-c flex-jc-sb" style="margin-bottom: 24rpx;">
					<view>商品总数量：{{sumTotal}}</view>
					<view v-if="isConfirm">运费：{{freight}}</view>
					<view>总采购价￥{{interval(sumPrice,2)}}</view>
				</view>
				<view class="menu-btn" @click="submit">
					{{isConfirm?'确认补货单':'提交补货单'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { interval } from '@/utils/util.js';
	import home from '@/api/home.js';
	import product from '@/api/product.js';
	import common from '@/api/common.js';
	import user from '@/api/user.js';
	export default {
		data() {
			return {
				formContent: [{
						title: '货道',
						fontSize: '22rpx',
						width: '100rpx',
						color: '#666666',
						field: 'hd',
						textAlign: 'center'
					},
					{
						title: '商品名称',
						fontSize: '22rpx',
						width: '300rpx',
						color: '#666666',
						field: 'mc',
						textAlign: 'left'
					},
					{
						title: '库存',
						fontSize: '22rpx',
						width: '100rpx',
						color: '#666666',
						field: 'kc',
						textAlign: 'center'
					},
					// {
					// 	title: '单价',
					// 	fontSize: '22rpx',
					// 	width: '100rpx',
					// 	color: '#666666',
					// 	field: 'cost_price',
					// 	textAlign: 'center'
					// },
					{
						title: '补货',
						fontSize: '22rpx',
						width: '120rpx',
						color: '#666666',
						field: 'quantity',
						textAlign: 'center'
					}
				],
				list: [],
				page: 1,
				device_no: null,
				freight: 0,
				addrId: '',
				isConfirm: false,//是否确认
			}
		},
		computed:{
			interval() {
				return (s,n) => {
					n = n > 0 && n <= 20 ? n : 2;
					s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
					var l = s.split(".")[0].split("").reverse(),
						r = s.split(".")[1];
					let t = "";
					for (let i = 0; i < l.length; i++) {
						t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
					}
					return t.split("").reverse().join("") + "." + r;
				}
			},
			sumPrice() {
				let total = 0
				this.list.map(v => {
					total += v.warehouse_cost_price * (v.quantity || 0)
				})
				return Math.ceil(total * 100) / 100
			},
			sumTotal() {
				let total = 0
				this.list.map(v => {
					total += v.quantity || 0
				})
				return total
			}
		},
		onLoad(op) {
			if(!op.device_no) return
			this.device_no = op.device_no
			this.getAddressList()
			this.inventory()
			this.getGoodsList(this.device_no)
		},
		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1]; // 当前页的实例
			let id = currPage.$vm.value
			if(id) {
				this.addrId = id
			}
		},
		methods: {
			overlimit() {
				uni.showToast({
					title: '库存不足',
					icon: 'none'
				})
			},
			async getAddressList() {
				const res = await user.getAddressList()
				if(!res.data.length) return
				this.addrId = res.data[0].id
			},
			async inventory() {
				const res = await common.inventory()
				if (res.code === 200) this.freight = Number(res.data.freight)
			},
			async supplementGoods(info) {
				const res = await product.supplementGoods(info)
				if(res.code === 200) {
					uni.redirectTo({
						url: `/pages/equipment/replenishment/confirm?order_no=${res.data.order_no}&state=1`
					})
				}
			},
			async getGoodsList(device_no) {
				const res = await home.getDeviceChannal({
					device_id: device_no
				})
				let l = res.data[0].goods_list || []
				l.map(v => v.quantity = 0)
				this.list = l || []
			},
			allSubmint(){
				for(let i = 0;i<this.list.length;i++) {
					let num = this.list[i].max_stock - this.list[i].stock
					num = num > this.list[i].warehouse_stock ? this.list[i].warehouse_stock : num
					this.list[i].quantity = num > 0 ? num : 0
					this.list[i].stock = this.list[i].stock
				}
			},
			submit(){
				if(!this.addrId){
					uni.showToast({
						title: '请填写收货地址',
						icon: 'none',
						success() {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/equipment/replenishment/address?state=1'
								})
							},1000)
						}
					})
					return
				} 
				
				let newArr = this.list.filter(v => v.quantity)
				if(newArr.length == 0) return uni.showToast({
					title: '暂无补货数据',
					icon: 'none'
				})
				if(!this.isConfirm) return this.isConfirm = true
				let filterArr =[]
				newArr.map(v => {
					filterArr.push({
						goods_id: v.goods_id,
						device_channel_id: v.channel_no,
						quantity: v.quantity
					})
				})
				let info = {
					address_id: this.addrId,
					freight: this.freight,
					device_no: this.device_no,
					total_num: this.sumTotal,
					total_amount: Math.ceil((this.sumPrice + this.freight) * 100) / 100,
					goods_data: filterArr
				}
				this.supplementGoods(info)
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-number-box__minus {
		width: 20rpx !important;
		border: 1px solid #fff;
		padding: 5rpx;
		// transform: scale(0.7);
		// transform-origin: 40rpx 5rpx;
	}

	/deep/.u-number-box__plus {
		border: 1px solid #fff;
		width: 20rpx !important;
		padding: 5rpx;
	}

	/deep/.uni-input-wrapper {
		border-right: 1px solid rgba(153, 153, 153, 0.5);
		border-left: 1px solid rgba(153, 153, 153, 0.5);
		width: 40rpx;
	}

	/deep/.u-number-box {
		width: 120rpx;
		border-radius: 7rpx;
		border: 1rpx solid rgba(153, 153, 153, 0.5);
	}

	.t-title {
		padding: 15rpx 0;
		background: #FFFFFF;
		border-bottom: 1px solid #D8D8D8;
	}

	.ellipsis {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.list {
		margin-bottom: 10rpx;
		padding: 24rpx 0;
		background: #FFFFFF;

	}

	.text-a {
		text-align: center;
	}

	.menu {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		height: 201rpx;

		.menu-left {
			width: 189rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
		}

		.menu-right {
			width: 517rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;

			.menu-btn {
				width: 517rpx;
				height: 90rpx;
				background: #FCB527;
				border-radius: 18rpx;
				line-height: 90rpx;
				text-align: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

	}
</style>